<html>
<head>
<meta charset="utf-8">
<title>Subwest</title>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="datatables.min.css" rel="stylesheet" type="text/css" />
<link href="datatables.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="plugins.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="layer.css">
<link href="jquery.toolbar.css" rel="stylesheet" />
<!--
<link rel="stylesheet" href="font-awesome.min.css">	
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">	
</head>
<body>
<div class="container-fluid">
	<div class="row-fluid">
		<div class="col-md-12">
			<div class="row-fluid">
				<div class="col-md-3">
					<div id="mainw1" style="width:100%;height:30%;"></div>
				</div>
				<div class="col-md-4">
					<div id="mainw2" style="width:100%;height:30%;"></div>
				</div>
				<div class="col-md-4">
					<div class="portlet light bordered">
                                    <div class="portlet-title">
                                       
                                    </div>
                                    <div class="portlet-body">
                                        <table class="table table-striped table-bordered table-hover" id="sample_1">
                                            <thead>
                                                <tr>
                                                    <th> 事件名称 </th>
                                                    <th> 事件描述 </th>
                                                    <th> 威胁等级 </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            <!--   
                                                <tr>
                                                    <td> Presto </td>
                                                    <td> Nintendo DS browser </td>
                                                    <td> Nintendo DS </td>
                                                    
                                                </tr>
											-->
                                            </tbody>
                                        </table>
                                    </div>
                    </div>
				</div>
				<div class="col-md-1">
					<div style="margin-top:50px;"></div>
					<div id="toolId">
						<div data-toolbar="user-options" class="btn-toolbar pull-left"><i class="fa fa-cog"></i></div>
							<div id="user-options" class="toolbar-icons hidden">
								<a href="#" onclick="test();"><i class="fa fa-user"></i></a>
								<a href="#"><i class="fa fa-star"></i></a>
								<a href="#"><i class="fa fa-edit"></i></a>
								<a href="#"><i class="fa fa-trash"></i></a>
								<a href="#"><i class="fa fa-circle"></i></a>
							</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="col-md-12">
			<div class="row-fluid">
				<div class="col-md-5">
					<div id="mainw3" style="width:100%;height:30%;"></div>
				</div>
				<div class="col-md-6">
					<div class="portlet light bordered">
                                    <div class="portlet-title">
                                       
                                    </div>
                                    <div class="portlet-body">
                                        <table class="table table-striped table-bordered table-hover" id="sample_2">
                                            <thead>
                                                <tr>
                                                    <th> Rendering engine </th>
                                                    <th> Browser </th>
                                                    <th> Platform(s) </th>
                                                    <th> Engine version </th>
                                                    <th> CSS grade </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                               
                                                <tr>
                                                    <td> Presto </td>
                                                    <td> Nintendo DS browser </td>
                                                    <td> Nintendo DS </td>
                                                    <td> 8.5 </td>
                                                    <td> C/A
                                                        <sup>1</sup>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                    </div>
				</div>
				<div class="col-md-1">
				</div>
			</div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="col-md-11">
			<div id="mainw4" style="width:100%;height:30%;"></div>
		</div>
		<div class="col-md-1">
		</div>
	</div>
</div>

<script src="jquery.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<script src="echarts.min.js"></script>
<script src="jquery.pin.js"></script>
<script src="layer.js"></script>
<script src="jquery.toolbar.min.js"></script>
<script src="datatables.min.js" type="text/javascript"></script>
<script src="datatables.bootstrap.js" type="text/javascript"></script>
<script src="table-datatables-colreorder.js" type="text/javascript"></script>


<script type="text/javascript">

	jQuery(document).ready(function($) {

		$('div[data-toolbar="user-options"]').toolbar({
			content: '#user-options',
			position: 'top',
		});
		
		//@取饼图数据
		
		/*
		pieData=[];
		$.get('sub_west/data/pie.json',function(data){
			$(data.data).each(function(index,item){
				pieData.push({
					value: item.count,
					name: item.name
				}); 
			})
			console.log(pieData);
		});
		*/
	})
	pieData=[];
	pieData_type=[];
	pieData_nums=[];
	$.ajax({
		url: "sub_west/data/pie.json",
		async: false,//改为同步方式
		type: "GET",
	//	data: { arg: val },
		success: function (data) {
			$(data.data).each(function(index,item){
				pieData.push({
					value: item.count,
					name: item.name
				});
				pieData_type.push(
					item.name
				);
				pieData_nums.push(
					item.count				
				);
			})
		}
	});
	
	function getTwoDensionArr(dension,len)
	{
		var arr=new Array();
		for(var i=0;i<dension;i++)
		{
			arr[i]=new Array();
			for(var j=0;j<len;j++)
			{
				arr[i][j]="dafault";
			}
		}
		return arr;
	}
				
	function test(){

		layer.open({
		  type: 2,
		  title: 'search',
		  shadeClose: true,
		  shade: 0.8,
		  area: ['500px', '70%'],
		  offset: 't',
		  content: 'search.html' //iframe的url
		}); 
	}
	
	function testEvent(name,value){
		
		layer.open({
		  
		  type: 1,
		  skin: 'layui-layer-rim', //加上边框
		  offset:'t',
		  shadeClose: true, //开启遮罩关闭
		  time:1000,
		  area: ['420px', '240px'], //宽高
		  content: 'name is : '+name+'<br>'
		});		
	}		
	
	$("#toolId").pin();

	var myChartw1 = echarts.init(document.getElementById('mainw1'));
	var myChartw2 = echarts.init(document.getElementById('mainw2'));
	var myChartw3 = echarts.init(document.getElementById('mainw3'));
	var myChartw4 = echarts.init(document.getElementById('mainw4'));
	
	var optionw1 = {
		
		tooltip : {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		
		series : [
			{
				name: '访问来源',
				type: 'pie',
				radius : '55%',
				center: ['50%', '60%'],
				data: pieData,
				/*
				[
					{value:335, name:'直接访问'},
					{value:310, name:'邮件营销'},
					{value:234, name:'联盟广告'},
					{value:135, name:'视频广告'},
					{value:1548, name:'搜索引擎'}
				],
				*/
				itemStyle: {
					emphasis: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};
	myChartw1.setOption(optionw1);
	
	//@
	var optionw2 = {
		color: ['#3398DB'],
		tooltip : {
			trigger: 'axis',
			axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis : [
			{
				type : 'category',
				data : pieData_type,
				/*
				['subType-A','subType-B','subType-C','subType-D','subType-E'],
				*/
				axisTick: {
					alignWithLabel: true
				}
			}
		],
		yAxis : [
			{
				type : 'value'
			}
		],
		series : [
			{
				name:'直接访问',
				type:'bar',
				barWidth: '60%',
				data:pieData_nums
			}
		]
	};
	myChartw2.setOption(optionw2);
	
	barTypeEvent=getTwoDensionArr(5,3);
	
	myChartw2.on('mouseover', function (params) {
		tmp=[];
		//console.log(params.name); 根据事件类型返回对应的事件列表
		if(params.name=="subType-A")
		{
			$.ajax({
				url: "sub_west/data/barType.json",
				async: false,//改为同步方式
				type: "GET",
			//	data: { arg: val },
				success: function (data) {
					$(data.data).each(function(index,items){
						tmp.push(items.sjmc);
						tmp.push(items.sjms);
						tmp.push(items.wxdj);
						barTypeEvent[index]=tmp;
						tmp=[];
					})
					
					
				}
			});
		}
		else
		{
			$.ajax({
				url: "sub_west/data/barType2.json",
				async: false,//改为同步方式
				type: "GET",
			//	data: { arg: val },
				success: function (data) {
					$(data.data).each(function(index,items){
						tmp.push(items.sjmc);
						tmp.push(items.sjms);
						tmp.push(items.wxdj);
						barTypeEvent[index]=tmp;
						tmp=[];
					})
					
					
				}
			});
		}
		var table=$('#sample_1');
		$('#sample_1 tbody tr').remove();
		for(var i=0;i<barTypeEvent.length;i++)
		{
			var tr=$("<tr></tr>");
			tr.appendTo(table);
			for(var j=0;j<barTypeEvent[i].length;j++)
			{
				var td=$("<td>"+barTypeEvent[i][j]+"</td>");
				td.appendTo(tr);
			}
		}
		
	});
    	
	//@
	var optionw3 = {
		color: ['#3398DB'],
		tooltip : {
			trigger: 'axis',
			axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis : [
			{
				type : 'category',
				data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
				axisTick: {
					alignWithLabel: true
				}
			}
		],
		yAxis : [
			{
				type : 'value'
			}
		],
		series : [
			{
				name:'直接访问',
				type:'bar',
				barWidth: '60%',
				data:[10, 52, 200, 334, 390, 330, 220]
			}
		]
	};
	myChartw3.setOption(optionw3);
	
	//@
	
	var optionw4= {
		
		tooltip : {
			trigger: 'axis'
		},
		
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis : [
			{
				type : 'category',
				boundaryGap : false,
				data : ['周一','周二','周三','周四','周五','周六','周日']
			}
		],
		yAxis : [
			{
				type : 'value'
			}
		],
		series : [
			
			{
				name:'搜索引擎',
				type:'line',
				stack: '总量',
				label: {
					normal: {
						show: true,
						position: 'top'
					}
				},
				areaStyle: {normal: {}},
				data:[820, 932, 901, 934, 1290, 1330, 1320]
			}
		]
	};
	myChartw4.setOption(optionw4);
	
</script>
</body>
<html>